import React, { Component } from 'react';
import './Footer.css';
export default class Footer extends Component {
  // 改变全选或全不选,这里只是一个开关,里面调用函数
  checked_all = () => {
    this.props.change_all();
  };

  // 删除全部已经完成的todoName
  clear_All_handel = () => {
    this.props.clear_All_checked();
  };
  render() {
    const { list } = this.props;
    const total = list.length;
    /* 获得选中项的总数量,可以使用reduce归并求得总数 */
    const checkedNum = list.reduce((pre, item) => pre + (item.isDone ? 1 : 0), 0);
    return (
      // 如果没有数据:total ===0 ,不展示下面div,展示暂无数据h1
      <div>
        {total !== 0 ? (
          <div className="todo-footer">
            <label>
              <input type="checkbox" onChange={this.checked_all} checked={total === checkedNum && checkedNum !== 0} />
            </label>
            <span>
              <span>已完成 {checkedNum}</span> / 全部 {total}
            </span>
            <button className="btn btn-danger" onClick={this.clear_All_handel}>
              清除已完成任务
            </button>
          </div>
        ) : (
          <h1>暂无数据</h1>
        )}
      </div>
    );
  }
}
